<template>
  <div>
    <top-data></top-data>
    <div class="w">
      <div class="receipt">
        <p>收货地址</p>
        <el-button @click="xinzen" type="primary" style="margin-left: 16px">
          新增收货地址
        </el-button>

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <div class="addTo">
            <h3>添加新地址</h3>
            <p>
              为了提升用户体验，你提交的信息将同步到您的账号中，便于您在其他相关服务场景中随时使用。
            </p>
            <div class="fullName">
              <input type="text" placeholder="姓名" v-model="fullName" />
            </div>
            <div class="fullName">
              <input type="text" placeholder="手机号码" v-model="phone" />
            </div>

            <div class="region">
              选择地区：
              <el-cascader v-model="dizhi" :options="options"></el-cascader>
            </div>

            <div class="fullName">
              <input
                type="text"
                placeholder="详细地址，精确到门牌号、楼层、房间号等"
                v-model="detailed"
              />
            </div>

            <div class="default">
              <label>
                <input type="checkbox" v-model="moren" /> 设置为默认
              </label>
            </div>

            <div class="addressInformation">
              <textarea
                cols="30"
                rows="5"
                placeholder="粘贴地址信息，可以自动识别"
                v-model="textareas"
              ></textarea>
              <span v-if="textareas != ''">清空</span>
              <span v-if="textareas != ''" @click="shiyong">使用</span>
            </div>

            <div class="addBtns">
              <button @click="quxiao">取消</button>
              <button @click="baochun" v-if="!xiugai">保存</button>
              <button @click="xiugaigai" v-if="xiugai">保存</button>
            </div>
          </div>
        </el-drawer>
      </div>

      <div class="address">
        <div class="no-address" v-if="!addressLibrary.length">
          您还没有收货地址，请先<el-button
            @click="xinzen"
            type="primary"
            style="margin-left: 16px"
          >
            添加
          </el-button>
        </div>

        <div class="have-address" v-if="addressLibrary.length">
          <div
            class="address-information"
            v-for="(item, index) in addressLibrary"
            :key="index"
          >
            <label @click="selectAddress(index)">
              <div class="neir">
                <input
                  type="radio"
                  id="addres1"
                  name="address"
                  :checked="item.moren ? true : false"
                  @click="xuanzedizhi(index)"
                />
                <p>
                  {{ item.dizhi }}{{ item.detailed }}
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  {{ item.fullName }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  {{ item.phone }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span>{{ item.moren ? "默认地址" : "" }}</span>
                </p>
              </div>
            </label>
            <span @click="modify(index)">修改本地址</span>
          </div>
        </div>
      </div>

      <div class="productInformation">
        <div class="productInformation-title">商品信息</div>
        <div class="productInformation-son">
          <div class="top-head">
            <p>商品名称</p>
            <p>单价</p>
            <p>数量</p>
            <p>小计</p>
          </div>

          <div class="information-content">
            <div
              class="content-son"
              v-for="(item, index) in placeLists"
              :key="index"
            >
              <div class="names">
                <div class="pictures">
                  <img :src="item.imageUrl" alt="" />
                </div>
                <div class="informationName">
                  <p>{{ item.name }}</p>
                  <p>{{ item.color }}</p>
                  <p>{{ item.activity }}</p>
                </div>
              </div>

              <div class="product-unitPrice">
                <p>￥{{ item.originalPrice }}.00</p>
                <p>￥{{ item.presentPrice }}.00</p>
              </div>

              <div class="product-num">{{ item.nums }}</div>

              <div class="product-xiaoji">
                ￥{{ item.nums * item.originalPrice }}.00
              </div>
            </div>
          </div>

          <div class="information-foot">
            <p>发货时间</p>

            <el-date-picker v-model="values" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
      </div>

      <div class="price">
        <div class="total-price">
          <span>商品总价:</span>
          <span>￥ {{ zongjia }}.00</span>
        </div>

        <div class="freight">
          <span>运费:</span>
          <span>￥ 0.00</span>
        </div>

        <div class="dikou" v-if="xiaoduxing != 0">
          <label>
            使用小度星抵 <input type="checkbox" v-model="dikou" />
          </label>
          <span>￥ {{ xiaoduxing }}</span>
        </div>

        <div class="total-money">
          <span>合计:</span>
          <span>￥ {{ zuihouhezi() }}</span>
        </div>

        <div class="manual">
          <div class="buy">
            <p>
              发货时间：小度商城订单一般会在 7
              天内尽快发出（参照订单的支付顺序），请您在提交订单后尽快完成支付；通过
              Du 码、预售等方式购买的商品无法保证 7 天内发货。
            </p>
            <p>
              运输方式：由于音箱设备属于磁性物品类不符合航空运输的基本要求，因此我们选择更为安全的陆运为您发货，
              请谅解。
            </p>
          </div>
          <span>购买须知</span>
        </div>
      </div>

      <div class="submit">
        <div class="send-to">送至： {{ songzhi }}</div>
        <div class="submit-btn" @click="submit">提交并支付</div>
      </div>
    </div>
    <foot-data></foot-data>
  </div>
</template>

<script>
import topData from "@/components/topData.vue";
import FootData from "@/components/footData.vue";
export default {
  data() {
    return {
      placeLists: null,
      zongjia: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      values: "",
      drawer: false,

      fullName: "",
      phone: "",
      detailed: "",
      dizhi: [],
      moren: false,
      textareas: "",
      options: [
        {
          value: "广东省",
          label: "广东省",
          children: [
            {
              value: "广州市",
              label: "广州市",
              children: [
                {
                  value: "从化区",
                  label: "从化区",
                },
                {
                  value: "白云区",
                  label: "白云区",
                },
                {
                  value: "天河区",
                  label: "天河区",
                },
                {
                  value: "黄埔区",
                  label: "黄埔区",
                },
              ],
            },
            {
              value: "惠州市",
              label: "惠州市",
              children: [
                {
                  value: "博罗县",
                  label: "博罗县",
                },
                {
                  value: "惠阳县",
                  label: "惠阳县",
                },
              ],
            },
          ],
        },
        {
          value: "湖南省",
          label: "湖南省",
          children: [
            {
              value: "长沙市",
              label: "长沙市",
              children: [
                {
                  value: "芙蓉区",
                  label: "芙蓉区",
                },
                {
                  value: "天心区",
                  label: "天心区",
                },
                {
                  value: "开福区",
                  label: "开福区",
                },
                {
                  value: "雨花区",
                  label: "雨花区",
                },
                {
                  value: "望城区",
                  label: "望城区",
                },
              ],
            },
            {
              value: "衡阳市",
              label: "衡阳市",
              children: [
                {
                  value: "石鼓区",
                  label: "石鼓区",
                },
                {
                  value: "蒸湘区",
                  label: "蒸湘区",
                },
                {
                  value: "南岳区",
                  label: "南岳区",
                },
                {
                  value: "衡阳县",
                  label: "衡阳县",
                },
                {
                  value: "衡南县",
                  label: "衡南县",
                },
                {
                  value: "衡山县",
                  label: "衡山县",
                },
                {
                  value: "衡东县",
                  label: "衡东县",
                },
                {
                  value: "祁东县",
                  label: "祁东县",
                },
              ],
            },
          ],
        },
      ],
      addressLibrary: [],

      indexs: null,
      xiugai: false,
      songzhi: "",
      shoujianr: "",
      dindanList: [],
      xiaoduxing: 0,
      yunfei: 0,
      heji: 0,
      dikou: false,
    };
  },
  methods: {
    shiyong() {
      this.fullName = this.textareas.split("，")[0];
      this.phone = this.textareas.split("，")[1];
      this.detailed = this.textareas.split("，")[2];
    },

    // 添加地址
    xinzen() {
      this.drawer = true;
      this.xiugai = false;
    },
    // 保存新添加的地址
    baochun() {
      if (
        this.fullName != "" &&
        this.phone != "" &&
        this.dizhi.length != 0 &&
        this.detailed != ""
      ) {
        let diqu = "";
        this.dizhi.forEach((item) => {
          diqu += item;
        });
        if (this.moren) {
          this.addressLibrary.forEach((item) => (item.moren = false));
        }
        this.addressLibrary.unshift({
          fullName: this.fullName,
          phone: this.phone,
          dizhiArr: this.dizhi,
          dizhi: diqu,
          detailed: this.detailed,
          moren: this.moren,
        });

        this.fullName = this.phone = this.detailed = "";
        this.moren = false;
        this.dizhi = [];
        this.drawer = false;

        window.localStorage.setItem(
          "addressLibrary",
          JSON.stringify(this.addressLibrary)
        );
      } else {
        this.$message({
          message: "要好好填完地址信息哦",
          type: "warning",
        });
      }
    },

    // 修改地址
    modify(index) {
      this.xiugai = true;
      this.drawer = true;
      this.indexs = index;
      this.fullName = this.addressLibrary[index].fullName;
      this.phone = this.addressLibrary[index].phone;
      this.detailed = this.addressLibrary[index].detailed;
      this.dizhi = this.addressLibrary[index].dizhiArr;
      this.moren = this.addressLibrary[index].moren;
    },
    // 保存修改后的地址
    xiugaigai() {
      this.drawer = false;
      this.xiugai = false;
      if (this.moren) {
        this.addressLibrary.forEach((item) => (item.moren = false));
      }
      this.addressLibrary[this.indexs].fullName = this.fullName;
      this.addressLibrary[this.indexs].phone = this.phone;
      this.addressLibrary[this.indexs].detailed = this.detailed;
      this.addressLibrary[this.indexs].dizhiArr = this.dizhi;
      let diqu = "";
      this.dizhi.forEach((item) => {
        diqu += item;
      });
      this.addressLibrary[this.indexs].dizhi = diqu;
      this.addressLibrary[this.indexs].moren = this.moren;

      window.localStorage.setItem(
        "addressLibrary",
        JSON.stringify(this.addressLibrary)
      );

      this.fullName = this.phone = this.detailed = "";
      this.moren = false;
      this.dizhi = [];
      this.drawer = false;
    },

    // 修改保证地址取消按钮
    quxiao() {
      this.drawer = false;
      this.fullName = this.phone = this.detailed = "";
      this.moren = false;
      this.dizhi = [];
      this.drawer = false;
    },

    // 选择地址
    selectAddress(index) {
      this.songzhi =
        this.addressLibrary[index].dizhi + this.addressLibrary[index].detailed;
      this.dindanList[0].dindantou.shoujianr = this.songzhi;
      window.localStorage.setItem(
        "dindanList",
        JSON.stringify(this.dindanList)
      );
    },

    xuanzedizhi(index) {
      console.log(index);
      this.shoujianr = this.addressLibrary[index].fullName;
    },

    zuihouhezi() {
      if (this.dikou) {
        return (this.heji - this.xiaoduxing).toFixed(2);
      } else {
        return this.heji;
      }
    },

    // 提交订单
    submit() {
      if (localStorage.addressLibrary) {
        // 支付成功跳转值订单页
        this.$router.push({
          path: "myView",
          query: {
            value: "dd",
          },
        });
    

        this.$message({
          message: "支付成功，欢迎下次再来",
          type: "success",  
        });

        if (this.values.getDate() != new Date().getDate()) {
          this.dindanList[0].dindantou.state = "待发货";
        } else {
          this.dindanList[0].dindantou.state = "待收货";
        }

        this.dindanList[0].dindantou.shoujianr = this.songzhi;
        if (this.dikou) {
          this.xiaoduxing = 0;
        } else {
          this.xiaoduxing += this.zongjia / 100;
        }

        window.localStorage.setItem("xiaoduxing", this.xiaoduxing);

        window.localStorage.setItem(
          "dindanList",
          JSON.stringify(this.dindanList)
        );

        window.localStorage.setItem(
          "placeLists",
          JSON.stringify(this.placeLists)
        );
      } else {
        this.$message({
          message: "还没有收货地址哦",
          type: "warning",
        });
      }
    },
  },

  created() {
    if (localStorage.addressLibrary) {
      this.addressLibrary = JSON.parse(
        window.localStorage.getItem("addressLibrary")
      );
    }

    this.placeLists = JSON.parse(window.localStorage.getItem("placeLists"));
    this.zongjia = JSON.parse(window.localStorage.getItem("zongjia"));
    this.values = new Date();
    this.addressLibrary.forEach((item) => {
      if (item.moren) {
        this.songzhi = item.dizhi + item.detailed;
      }
    });

    if (localStorage.dindanList) {
      this.dindanList = JSON.parse(window.localStorage.getItem("dindanList"));
    }
    this.dindanList[0].dindantou.shoujianr = this.songzhi;
    window.localStorage.setItem("dindanList", JSON.stringify(this.dindanList));

    if (localStorage.xiaoduxing) {
      this.xiaoduxing = JSON.parse(window.localStorage.getItem("xiaoduxing"));
    }

    this.heji = this.zongjia + this.yunfei;
  },
  components: { topData, FootData },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/payment.scss";
</style>